<!--加油站查看申诉列表-->
<script setup>
import OperaHeader from '../components/OperaHeader'
import AppealTypeSelector from '../components/AppealTypeSelector'
import axios from "axios";
import { ref } from "vue";
import { useRouter } from "vue-router";
// var role = localStorage.getItem('role')
// var isCompany = ref(true)



// //查看详情信息
// const form = ref({
//   id:0,
//   pid:0,
//   petrolName:'',
//   photo:'',
//   illegalType:0,//1:打手机 2： 3：油罐区检修不规范 4？
//   description:'',
//   date:'',
//   time:'',
// })

var tableData = ref([])
const router = useRouter()

function handleClick(index,row) {
  // console.log(index,row);
  router.push({
    path:'/main/violationDetail',
    query:{
      date:row.date,
      description:row.description,
      id:row.id,
      illegalType:row.illegalType,
      petrolName:row.petrolName,
      photo:row.photo,
      pid:row.pid,
      time:row.time
    }
  })
}
const type = ref(0)
const total = ref(0)
const pageNum = ref(1)
const pageSize = 10
const handleSearch = () => {
  const obj = {
    pageNum: pageNum.value,
    pageSize,
    status: type.value
  }
  const params = new URLSearchParams(obj).toString()
  axios.get(`/system/violation/appeal?${params}`).then(res=>{
    const {code, msg, ...data} = res.data
    if (code === 200) {
      tableData.value = data.rows
      total.value = data.total
    } else {
      ElMessage.error(msg)
    }
  }).catch(error=>{
    if (error.respond){
      console.log(error.respond.data);
    } else if (error.request){
      console.log(error.request);
    }else {
      console.log('Error',error.message)
    }

  })
}
handleSearch()
const formatter = (row, column, cellValue) => {
  //return row.illegalType=='1'?'是':'否'
  if(row.illegalBehaviorId =='1'){ return '打手机'}else if(row.illegalBehaviorId=='2'){return '未正确摆放护栏'}else if(row.illegalBehaviorId =='3'){
    return '登高未戴安全帽'
  }else if(row.illegalBehaviorId=='4'){
    return '火灾'
  }else{
    return '卸油区有人'
  }
}
const status = ['未通过', '未处理', '已通过']
const formatterResult = (row, column, cellValue) => {
  return status[cellValue + 1]
}

function handlePageChange(currentPage){
  pageNum.value = currentPage
  handleSearch()
}

function goToFile(props){
  console.log(props);
        window.open(props.illegalPhoto, '_blank')
    }

</script>
<template>
  <h1 class="pageTitle">我的申诉</h1>
  <OperaHeader @click="handleSearch">
    <AppealTypeSelector v-model="type"></AppealTypeSelector>
  </OperaHeader>
  <div style=" margin-left: 5%; margin-top: 10px; margin-bottom: 30px; color: #ffde59; text-align: left;">
  </div>
  <div  class="t_background">
    <div class="tmainBody">
      <el-table stripe  :data="tableData" :header-cell-style="{'text-align':'center'}" style="width: 100%">
        <!-- <el-table-column prop="happenDatetime" label="违规时间" align="center" /> -->
        <el-table-column prop="appealDate" label="申诉时间" align="center" />
        <el-table-column prop="illegalContent" label="违规内容" align="center" />
        <el-table-column prop="illegalPhoto" label="违规附件" align="center">
          <template #default="scope">
            <p id="link" @click="goToFile(scope.row)">点击跳转查看附件</p>
          </template>
        </el-table-column>
        <el-table-column prop="processDate" label="处理时间" align="center" :formatter="(_, _c, value) => !!value ? value : '-'"></el-table-column>
        <el-table-column prop="status" label="申诉结果" align="center" :formatter="formatterResult"/>
        <el-table-column prop="processRemark" label="总公司意见" align="center" :formatter="(_, _c, value) => !!value ? value : '-'"/>

      </el-table>
      <!--    分页 -->
      <el-row>
        <el-col style="">
          <!--        <el-pagination-->
          <!--                        :page-size="10"-->
          <!--            :pager-count="11"-->
          <!--            layout="prev, pager, next"-->
          <!--            :total="1000"-->
          <!--        />-->
          <el-pagination
           background
           v-model="pageNum"
           hide-on-single-page
            layout="prev, pager, next"
             @current-change="handlePageChange"
              :total="total"
              :default-page-size="pageSize" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
#link{
  color: var(--el-color-primary);
  text-decoration: underline;
}
.t_background {
  width: 90%;
  background-color: #ffffff;
  margin-left: 5%;
}
.tmainBody {
  width: 95%;
  /*justify-content: center;*/
  margin: auto;
}
.tmainBody >>> .el-table__row>td{
  /* 去除表格线 */
  border: none;
}
.el-pagination{
  margin:10px  auto;
  width:fit-content;
}
/*.tmainBody >>> .el-table th.is-leaf {*/
/*  !* 去除上边框 *!*/
/*  border: none;*/
/*}*/
.el-table--fit.el-table--striped.el-table--enable-row-hover.el-table--enable-row-transition.el-table.el-table--layout-fixed.is-scrolling-none{
  margin:20px 0;
}

</style>
